<template>
    <div class="myLogin myFlex">
        <div class="loginWindow myFlex">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="padding-top: 40px">
                <el-form-item label="账号" prop="username" class="myFlex">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" class="myFlex">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item class="myFlex">
                    <el-button type="primary" @click="submitForm('ruleForm')">进入</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                adminList: this.$store.state.admins,
                ruleForm: {
                    username: 'admin',
                    password: '123456',
                    admins:[],
                    beverages:[]
                },
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                }
            };
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {


                    if (valid) {
                        //检查账号密码是否正确
                        let flag = false;
                        for(let i=0;i<this.adminList.length;i++){
                            if(this.adminList[i].username === this.ruleForm.username){
                                if(this.adminList[i].password === this.ruleForm.password){
                                    flag=true;

                                    //正确才打开延迟窗口
                                    const loading = this.$loading({
                                        lock: true,
                                        text: '登陆中',
                                        spinner: 'el-icon-loading',
                                        target:'.myLogin',
                                        background: 'rgba(0, 0, 0, 0.7)'
                                    });

                                    const _this = this
                                    setTimeout(() => {
                                        loading.close();
                                        _this.$router.push('/inventory');
                                    }, 600);

                                }else break;
                            }
                        }
                        if(!flag){
                            //验证不通过
                            this.$alert('账号或密码错误！请重新输入', '提示', {
                                confirmButtonText: '确定'
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }

                });
            }
        }
    }
</script>

<style scoped>

    .myFlex{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .myLogin{
        width: 100%;
        height: 85%;
    }

    .loginWindow{
        width: 45%;
        height: 55%;
        background-color: gainsboro;
        border-radius: 20px;
        opacity: 0.8;
    }

    @media screen and (max-width: 1200px) {
        .loginWindow{
            width: 90%;
            height: 40%;
            background-color: gainsboro;
            border-radius: 20px;
            opacity: 0.8;
        }
    }
</style>